<template>
  <div style="margin-top: 50px">
    <div class="top">
      <div style="text-align: center">
        <div class="icon_div"><img src="@/assets/image/right.png"></div>
        <div class="icon_div"><div class="xian1" /></div>
        <div class="icon_div"><img src="@/assets/image/right.png"></div>
        <div class="icon_div"><div class="xian2" /></div>
        <div class="icon_div"><img src="@/assets/image/3_blue.png"></div>
        <div class="icon_div"><div class="xian3" /></div>
        <div class="icon_div"><img src="@/assets/image/4_grey.png"></div>
      </div>
      <div style="text-align: center">
        <div class="icon_div" style="width: 195px">
          <span style="color: gray">填写账号及验证</span>
        </div>
        <div class="icon_div" style="width: 192px">
          <span style="color: gray">二次验证</span>
        </div>
        <div class="icon_div" style="width: 191px">设置新密码</div>
        <div class="icon_div" style="width: 195px">
          <span style="color: gray">完成</span>
        </div>
      </div>
    </div>
    <div class="container">
      <div style="background-color: #ecf1f8; width: 225px; margin-left: 187px">
        <span
          style="
            color: rgb(98 101 105);
            width: 580px;
            height: 30px;
            line-height: 2;
          "
        >请重置您的新密码，并进行确认</span>
      </div>
      <el-form ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="新密码:" style="margin-left: 28px">
          <el-input v-model="pwd" type="password" class="input_text" />
        </el-form-item>
        <el-form-item label="确认新密码:">
          <el-input v-model="NewPwd" type="password" class="input_text" />
        </el-form-item>
      </el-form>
      <div class="btn_div">
        <el-button
          type="primary"
          style="width: 300px"
          @click="Next"
        >下一步</el-button>
      </div>
    </div>
    <div><hr style="width: 700px"></div>
    <div style="text-align: center">
      <span
        style="color: rgb(98 101 105)"
      >为避免手机遗失导致重要信息泄露，密码重置功能需要您本人和部门同事双重短信验证，敬请知悉。</span>
    </div>
  </div>
</template>

<script>
import Global from '@/utils/Global.js'
export default {
  data() {
    return {
      pwd: '',
      NewPwd: '',
      userid: ''
    }
  },
  created() {
    // this.userid = this.$route.params.userid
  },
  methods: {
    UpdatePwd() {
      const _that = this
      if (_that.pwd == '') {
        _that.$message.error('请输入新密码！')
        return
      }
      if (_that.pwd.length < 8) {
        _that.$message.error('新密码长度不足8位！')
        return
      }
      if (_that.NewPwd == '') {
        _that.$message.error('请输入确认密码！')
        return
      }
      if (_that.pwd != _that.NewPwd) {
        _that.$message.error('两次密码不一致！')
        return
      }
       _that.$router.replace({ path: '/successpage' })
    },
    Next() {
      const _that = this
      if (_that.pwd == '') {
        _that.$message.error('请输入新密码！')
        return
      }
      if (_that.NewPwd == '') {
        _that.$message.error('请输入确认密码！')
        return
      }
      if (_that.pwd != _that.NewPwd) {
        _that.$message.error('两次密码不一致！')
        return
      }
      this.$router.replace({ path: '/successpage' })
    }
  }
}
</script>
<style scoped>
.top {
  width: 100%;
  height: 70px;
}
.container {
  margin: 0 auto;
  width: 600px;
  height: 330px;
}

.demo-ruleForm {
  margin-left: 110px;
  margin-top: 40px;
}

.input_text {
  width: 300px;
}

.btn_div {
  text-align: center;
}
/deep/ label {
  font-weight: 500;
}

.icon_div {
  display: inline-block;
}
.xian1 {
  width: 160px;
  border: 1px solid #2f86f6;
  background-color: #2f86f6;
  margin-bottom: 15px;
}
.xian2 {
  width: 160px;
  border: 1px solid #2f86f6;
  background-color: #2f86f6;
  margin-bottom: 15px;
}
.xian3 {
  width: 160px;
  border: 1px solid #dadada;
  background-color: #dadada;
  margin-bottom: 15px;
}
</style>
